<!--
 * @FileDescription: 
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2021-08-20 15:54:37
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2021-08-20 16:40:16
-->
<template>
  <el-row
    style="display: flex;justify-content: center;flex-wrap: wrap;align-items: center;"
  >
    <el-col
      :xs="24"
      :sm="24"
      :md="12"
      :lg="7"
      :xl="7"
      v-for="(item, index) in list"
      :key="index"
      style="margin-bottom:15px;margin-right:15px"
    >
      <el-card :body-style="{ padding: '0px' }">
        <a :href="item.src" target="_blank">
          <img class="image" :src="item.imgSrc" />
          <div style="padding: 14px;">
            <span>{{ item.title }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ item.des }}</time>
            </div>
          </div>
        </a>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      list: [
        {
          src: "https://picsum.photos",
          imgSrc: "https://picsum.photos/200/300",
          title: "随机图片网站",
          des: "随机生成各种图片",
        },
        {
          src: "https://convertio.co/zh/mp4-mp3/",
          imgSrc:
            "https://cdn.wangzc.wang/uPic/vgbFQ736%20.png",
          title: "各种文件转换器",
          des: "免费处理各种文件转换",
        },
        {
          src: "https://tinify.cn/",
          imgSrc: "https://tinify.cn/images/example-orig.png",
          title: "图片压缩工具",
          des: "智能有损压缩",
        },
        {
          src: "https://www.bejson.com/json/col2json/",
          imgSrc:
            "https://cdn.wangzc.wang/uPic/jrruCk58%20.png",
          title: "Excel转Json",
          des: "",
        },
        {
          src: "https://logoly.pro/#/",
          imgSrc:
            "https://cdn.wangzc.wang/uPic/iS4pkh50%20.png",
          title: "log设计器",
          des: "",
        },
           {
          src: "https://getemoji.com/",
          imgSrc:
            "https://cdn.wangzc.wang/uPic/Hm3Ks856%20.png",
          title: "emoji网站",
          des: "",
        },
       
      ],
    };
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped>
.time {
  font-size: 13px;
  color: #999;
  height: 16px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 200px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
